<template>
  <!-- 搜索工作栏 -->
  <div class="header projectList-yunying recycleBin">
    <div class="search-tools">
      <SearchBar
        ref="formParams"
        :search-config="searchConfig"
        label-width="100px"
        label-position="right"
        :slot-span="5"
        @transferSearchParams="transferSearchParams"
        @search="handleSearch"
        @resetSearch="resetSearch"
      >
        <!-- <el-button slot="inner" size='small' type="primary">新建</el-button> -->
      </SearchBar>
    </div>

    <Table
      ref="tableList"
      :table-config="recycleBinConfig"
      :table-data="tableData"
      :total="total"
      :page-no="pageNo"
      :page-size="pageSize"
      @sortChange="sortChange"
      @handleSelectionChange="handleSelectionChange"
      @handleChangePage="handleChangePage"
    >
      <el-table-column label="操作" align="center" width="240">
        <template slot-scope="scope">
          <div class="btn-box">
            <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
            <el-button size="mini" type="success" @click="handleRevert(scope.row)">还原</el-button>
          </div>
        </template>
      </el-table-column>
    </Table>
    <ViewDetail ref="viewDetail" />
    <AddDetailPop ref="addDetailPop" @addSuccess="handleSearch" />
  </div>
</template>
<script>
import { getMsgTypeList, deleteMsg, updateType } from '@/api/inner-msg/index.js'
import { recycleBinSearchConfig, recycleBinConfig } from './initData'
import { getTableList, revertApi, getProTypes } from './api'
import SearchBar from '@/views/components/SearchBar'
import Table from '@/views/components/Table'
import ViewDetail from './components/viewDetail.vue'
import { formatDate } from '@/utils/index.js'
import AddDetailPop from './components/addDetailPop.vue'

export default {
  name: 'NewsList',
  components: {
    SearchBar,
    Table,
    ViewDetail,
    AddDetailPop
  },
  data() {
    return {
      searchConfig: recycleBinSearchConfig,
      recycleBinConfig,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableSelectList: [],
      sortable: null,
      searchParams: {},
      sortingFields: null,
      noDeleteTypes: ['系统通知', '实习招聘', '实践项目', '留言板', '其他'],
      columnList: []
    }
  },
  created() {
    // this.getList()
  },
  mounted() {
    // this.dragSort();
  },
  methods: {
    resetSearch() {
      this.searchParams = {}
      this.sortingFields = null
      this.$refs.tableList && this.$refs.tableList.$children[0].clearSort()
      this.handleSearch()
    },
    async handleSort() {
      const { code, data } = await getMsgTypeList({
        pageNo: 1,
        pageSize: 999
      })
      if (code === 0) {
        this.$refs.dragSort && this.$refs.dragSort.open({
          list: data.list
        })
      }
    },
    transferSearchParams(params) {
      this.searchParams = params
    },
    handleSearch() {
      this.pageNo = 1
      this.getList()
    },
    async getList() {
      const params = {}
      for (const key in this.searchParams) {
        if (this.searchParams[key] || this.searchParams[key] === 0) {
          params[key] = this.searchParams[key]
        }
      }
      const { code, data } = await getTableList({
        ...params,
        deleted: '1',
        sortField: {
          'field': 't.weight',
          'order': 'desc'
        },
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      if (code === 0) {
        this.tableData = data.list.map(v => {
          if (!v.companyName && v.creator === 'admin') {
            v.companyName = '数据学徒'
          }
          return {
            ...v,
            createTimeStr: formatDate(v.createTime),
            publishTimeStr: formatDate(v.publishTime),
            updateTimeStr: formatDate(v.updateTime)
            // statusName: v.status === '1' ? '已发布' : '未发布',
            // num: v.num ? v.num : 0
          }
        })
        this.total = data.total
      } else {
        this.tableData = []
        this.total = []
      }
    },
    handleSelectionChange(val) {
      this.tableSelectList = val
    },
    handleChangePage({ pageNo, pageSize }) {
      this.pageNo = pageNo
      this.pageSize = pageSize
      this.getList()
    },
    // 新建
    async handleView(row) {
      this.columnList = await this.columnListApi()
      this.$refs.addDetailPop && this.$refs.addDetailPop.open({ popType: 'view', id: row.id, columnList: this.columnList })
    },
    async columnListApi() {
      let columnList = []
      const { code, data } = await getProTypes()
      if (code === 0 && data && data && data.length > 0) {
        columnList = data.map(v => {
          return {
            label: v.name,
            value: v.id
          }
        })
      }
      return columnList
    },
    async handleEdit(row) {
      this.columnList = await this.columnListApi()
      this.$refs.addDetailPop &&
        this.$refs.addDetailPop.open({ popType: 'edit', columnList: this.columnList, id: row.id })
    },

    async handleRevert(row) {
      const { code } = await revertApi({ id: row.id })
      if (code === 0) {
        this.$message.success('还原成功')
        this.getList()
      }
    },
    // 不发布
    // 暂停发布
    async handleOperatePush(row, status) {
      const mark = status === '0' ? '下架' : '上架'
      this.$confirm(`是否确认${mark}?`, '提示').then(async() => {
        const { code } = await updateType({
          id: row.id,
          status
        })
        if (code !== 0) return
        this.$message.success('操作成功')
        this.getList()
      })
    },
    handleDelete({ id }) {
      this.$confirm('是否确认删除?', '提示').then(async() => {
        const { code, msg } = await deleteMsg({
          id
        })
        if (code !== 0) {
          this.$message.error(msg)
          return
        }
        this.$message.success('删除成功')
        this.handleSearch()
      })
    },
    confirmDelete() {
      this.$message.success('删除成功')
    },
    sortChange(sortingFields) {
      this.sortingFields = sortingFields
      this.handleSearch()
    }
  }
}
</script>

<style lang='scss' scoped>
    .header {
        display: flex;
        flex-direction: column;
        padding: 0 20px;

        .search-tools {
            display: flex;
            justify-content: space-between;
        }

        .btn-box {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .btns {
                color: #02A7F0;
                cursor: pointer;
                display: inline-block;
                width: 33.33%
            }
            .delete {
                color: #f56c6c;
            }
        }
    }
</style>
